<template>
    <div class="nav">
        <div class="title">
            <i class="el-icon-platform-eleme" style="font-size: 18px;color: rgb(58, 235, 226);"></i>&nbsp
            <span v-if="!isCollapse">代码评判系統</span>
        </div>
        <el-menu
        :collapse="isCollapse"
        :default-active="defaultActive"
        class="el-menu-vertical-demo"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b"
        :unique-opened="true"
        router
        @select="select"
        >
            <template v-for="(item, index) in layout.viewList">
                <el-submenu :index="item.index" v-if="item.list" :key="index">
                    <template slot="title">
                        <i v-if="item.icon" :class="item.icon"></i>
                        <span>{{ item.title }}</span>
                    </template>
                    <el-menu-item :index="t.index" v-for="(t,i) in item.list" :key="i">
                        <i v-if="t.icon" :class="t.icon"></i>
                        <span>{{ t.title }}</span>
                    </el-menu-item>
                </el-submenu>
                <el-menu-item :index="item.index" v-else :key="item.index">
                    <i v-if="item.icon" :class="item.icon"></i>
                    <span>{{ item.title }}</span>
                </el-menu-item>
            </template>
        </el-menu>
    </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
    computed: {
        ...mapGetters(['layout','routerList','defaultActive'])
    },
    props : {
        isCollapse : {
            default : false
        }
    },
    methods : {
        select(data){
            this.$emit('select', data)
        }
    }
}
</script>

<style lang="scss" scoped>
.nav{
    .title{
        color: #fff;
        height: 45px;
        width: 100%;
        text-align: center;
        line-height: 60px;
    }
}


</style>